import React from 'react'
import style from './style.control'
import cx from 'classnames'
import { Switch } from '../../../ui-components'

export default (props) => {
	const toggleBoolean = (name) => {
		props.updateProfileTemplateFieldDetail({ [name]: 1- props[name] })
	}
	return (
		 <div className={cx({
			 [style.switch]: true,
			 [props.className]: props.className
		 })}>
			<div>
				<span>是否必填</span>
        <Switch
          onClick={() => {
            if (props.isMandatoryEditable === false) return;
            toggleBoolean('isMandatory');
          }}
          simple
          disabled={props.isMandatoryEditable === false}
          value={props.isMandatory}
        />
			</div>
			<div>
				<span>是否公开</span>
        <Switch
          simple
          disabled={props.isPublicVisibleEditable === false}
          value={props.isPublicVisible}
          onClick={() => { 
            if (props.isPublicVisibleEditable === false) return;
            toggleBoolean('isPublicVisible');
          }}
        />
			</div>
			<div>
				<span>是否启用</span>
        <Switch
          simple
          disabled={props.isEnabledEditable === false}
          value={props.isEnabled}
          onClick={() => {
            if (props.isEnabledEditable === false) return;
            toggleBoolean('isEnabled');
          }}
        />
			</div>
		</div>
	)
}
